<template>
    <!--<div ref="gantt" style="height:300px"></div>-->
    <div class="main">
        <div class="info2" :style="a">123
            <strong :style="a">文字...</strong>

        </div>
        <!--<div class="info" ref="gantt" :style="dataTable"></div>-->
    </div>

</template>

<script>
    import 'dhtmlx-gantt'
    export default {
        name: 'gantt',
        props: {
            tasks: {
                type: Object,
                default () {
                    return {
                        dheight:{'height':'200px'},
                        fonts:{'color':'red'},
                        a:{
                            color:'red',
                            backgroundColor:'gray'
                        },
                        c:{color:'red'},
                        b:{backgroundColor:'blue'},
                        screenHeight: document.body.clientHeight-360,   //减去header的60px
                        dataTable:'',
                        data: [],
                        links: []
                    }
                }
            }
        },

        mounted: function () {

            gantt.init(this.$refs.gantt);
            gantt.parse(this.$props.tasks);
            this.screenHeight = `${document.documentElement.clientHeight}`;
            this.dataTable = {'height':'900px'};
            this.a = {'font-size':'30px'};
        }
    }
</script>

<style>
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>
